@extends('admin.layout.app')
@section('title', '项目列表')

@section('nav')
    @include('admin.layout.nav', ['title'=> ['项目执行管理','项目列表']])
@endsection

@section('content')
    <div class="box box-primary" style="min-height: 300px;">
        <div class="box-header with-border">
            <h3 class="box-title">项目列表</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <form class="form-inline" style="margin-bottom: 15px; " autocomplete="off">
                <div class="form-group">
                    <label for="name">项目名称</label>
                    <input type="text" class="form-control" value="{{isset($query['name'])?$query['name']:''}}" name="name" placeholder="请输入">
                </div>
                <div class="form-group">
                    <label for="status">执行状态</label>
                    <select class="form-control" name="status">
                        <option value="-1"></option>
                        <option value="0" @if(isset($query['status'])&&$query['status']==0) selected @endif>待开工</option>
                        <option value="1" @if(isset($query['status'])&&$query['status']==1) selected @endif>执行中</option>
                        <option value="2" @if(isset($query['status'])&&$query['status']==2) selected @endif>已完成</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
            <table class="table table-bordered table-hover">
                <thead>
                <tr class="active">
                    <th width="50px">序号</th>
                    <th min-width="100px">项目名称</th>
                    <th min-width="100px">申请理由</th>
                    <th width="100px">项目申请人</th>
                    <th width="100px">项目甲方</th>
                    <th width="100px">项目金额</th>
                    <th width="80px">审核状态</th>
                    <th width="80px">执行状态</th>
                    <th width="150px">申请时间</th>
                    <th style="width: 80px">操作</th>
                </tr>
                </thead>
                <tbody>
                @forelse($list as $item)
                <tr>
                    <td>{{$loop->index+1+($list->currentPage()-1)*$list->perPage()}}</td>
                    <td>{{$item->name}}</td>
                    <td>{{$item->reason}}</td>
                    <td>{{$item->user_name}}</td>
                    <td>{{$item->first_party}}</td>
                    <td>{{$item->money}}</td>
                    <td><span class="badge bg-{{$item->status==0?'yellow':($item->status==1?'green':'red')}}">{{$item->status==0?'待审核':($item->status==1?'通过':'未通过')}}</span></td>
                    <td>
                        <span class="badge bg-{{$item->execute_status==0?'yellow':($item->execute_status==1?'blue':'green')}}">{{$item->execute_status==0?'待开工':($item->execute_status==1?'执行中':'已完成')}}</span>
                    </td>
                    <td>{{$item->created_at}}</td>
                    <td>
                        @if($item->execute_status==0)
                            <button class="btn btn-primary btn-sm handleExecute" data-name="{{$item->name}}" data-id="{{$item->id}}" data-toggle="modal" data-target="#myModal">开始执行</button>
                        @elseif($item->execute_status==1)
                            <button class="btn btn-primary btn-sm submitComplete" data-name="{{$item->name}}" data-id="{{$item->id}}" >完成项目</button>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" align="center">暂无数据</td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <!-- /.box-body -->
        <div class="box-footer clearfix">
            <div class="pull-right">
                {{ $list->links() }}
            </div>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">开始执行</h4>
                    </div>
                    <form class="form-horizontal">
                        <input name="pid" value="0" style="display: none;" />
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="projectname" class="col-sm-3 control-label">项目名称:</label>
                                <div class="col-sm-9">
                                    <div id="projectname" style="position: relative;top:8px;"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="deadline" class="col-sm-3 control-label">预计完成时间:</label>
                                <div class="input-group date col-sm-9" style="padding-right: 15px;padding-left: 15px;">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" name="deadline" class="form-control pull-right" id="datepicker">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-9">
                                    <input type="text" maxlength="255" name="remark" class="form-control" placeholder="可不填" />
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary submitExecute">提交</button>
                        </div>
                        <!-- /.box-footer -->
                    </form>

                </div>
            </div>
        </div>

    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="/AdminLTE-2.4.2/bower_components/boostrap_datepicker/css/bootstrap-datepicker3.css">
    <style>

    </style>
@endsection

@section('js')
    <script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/boostrap_datepicker/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/boostrap_datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        $(function(){
            $('#datepicker').datepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                todayHighlight: true,
                autoclose: true,
                startDate: new Date()
            });
            $('.submitComplete').click(function(){
                var name_ = $(this).attr('data-name');
                var pid = $(this).attr('data-id');
                var confirm_index = layer.confirm("您确定完成了“"+ name_ +"”项目？",{}, function () {
                    layer.close(confirm_index);
                    var load_index = layer.msg('正在处理中', {
                        icon: 16,
                        shade: 0.5,
                        time: 15000
                    });
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        }
                    });
                    $.post('/project/execute/complete', {pid: pid}, function (res) {
                        if(res.code == 200){
                            layer.close(load_index);
                            layer.msg('操作成功！', {icon: 1});
                            window.location.reload();
                        }else{
                            layer.alert(res.message, {icon: 5});
                        }
                    });
                });
            });

            $('.handleExecute').click(function(){
                $('textarea[name=remark]').val('');//清空
                var pid = $(this).attr('data-id');
                $('input[name=pid]').val(pid);

                var projectname = $(this).attr('data-name');
                $('#projectname').text(projectname);
            });

            $('.submitExecute').click(function(){
                var deadline = $('input[name=deadline]').val();
                var pid_ = $('input[name=pid]').val();
                var remark_ = $('textarea[name=remark]').val();
                if(deadline == '') {
                    layer.msg('请选择结束时间', {icon: 5});
                    return false;
                }

                var load_index = layer.msg('正在处理中', {
                    icon: 16,
                    shade: 0.5,
                    time: 15000
                });
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $.post('/project/execute/start', {pid: pid_, deadline: deadline, remark: remark_}, function (res) {
                    if(res.code == 200){
                        layer.close(load_index);
                        layer.msg('操作成功！', {icon: 1});
                        window.location.reload();
                    }else{
                        layer.msg(res.message, {icon: 5});
                    }
                });

            });

        })
    </script>
@endsection